<template>
    <a-table :columns="columns" :data-source="dataList" rowKey="id" :pagination="pagination" :loading="dataLoading"
        :scroll="{ x: tableWidth, scrollToFirstRowOnChange: true, y: scrollY }"
        :row-selection="rowSelection">
        <template #bodyCell="{ text, record, index, column }">
            <!-- 自定义slot -->
            <template v-if="column.slot">
                <slot :name="column.dataIndex" :text="text" :record="record" :index="index" :column="column"></slot>
            </template>

            <!-- 默认状态列 -->
            <div v-else-if="column.dataIndex == 'status'">
                <span v-if="record.status == 1" style="color: #2ba471;">开启</span>
                <span v-else style="color: #999;">禁用</span>
            </div>

            <!-- 操作列 -->
            <div v-else-if="column.type == 'action'">
                <template v-for="(item, index) in column.options">
                    <a-popconfirm v-if="item.type == 'delete'" title="确认删除该条数据?" ok-text="确认" cancel-text="取消"
                        @confirm="deleteConfirm(record)">
                        <a-button type="link" size="small" danger>{{ item.title }}</a-button>
                    </a-popconfirm>
                    <a-button v-else type="link" size="small" @click="onAction(item, record)">{{ item.title
                        }}</a-button>
                </template>
            </div>
        </template>
    </a-table>
</template>
<script setup>
import { onMounted, ref, reactive, watch } from 'vue';
import { message } from 'ant-design-vue';
/**
 *页面全局变量
*/
const dataLoading = ref(false)
const pageIndex = ref(1);
const pageSize = ref(10);
const pagination = reactive({
    // position: ["bottomCenter"],
    total: 0,
    current: pageIndex.value,
    pageSize: pageSize.value,
    pageSizeOptions: ["10", "20", "50", "100", "500"],
    showQuickJumper: true, //是否开启快速跳转至某页
    showSizeChanger: true,
    showTotal: (total) => `总计 ${total} 条数据`,
    onChange: (page, size) => {
        pageIndex.value = page;
        pageSize.value = size;
        getDataList();
    },
    onShowSizeChange: (current, size) => {
        pageIndex.value = 1;
        pageSize.value = size;
        pagination.current = 1;
        getDataList();
    }
});

const props = defineProps({
    // 表格列的配置描述
    columns: {
        type: Object,
        required: true
    },

    // 数据API接口
    api: {
        type: Function,
        required: true
    },
    //数据删除接口
    deleteApi: {
        tyep: Function,
    },
    // 额外参数
    extraParams: {
        type: Object,
        default: () => ({})
    },
    // 表格宽度
    tableWidth: {
        type: Number,
        default: 1400,
    },
    // 表格高度
    scrollY: {
        type: Number,
        default: 540,
    },
    // 行选择配置
    rowSelection: {
        type: Object,
        default: null
    }
})

const emits = defineEmits(["action"])

const dataList = ref([])
const searchParams = ref({})

/**
 *页面生命周期
*/
onMounted(() => {
    getDataList()
})

/**
 *页面函数
*/
function getDataList() {
    dataLoading.value = true;
    const params = {
        page: pageIndex.value,
        pageSize: pageSize.value,
        ...props.extraParams,
        ...searchParams.value
    };
    
    props.api(params).then(res => {
        if (res.code == 200) {
            if (res.result.list) {
                // 分页数据格式
                dataList.value = res.result.list;
                pagination.total = res.result.total || 0;
                pagination.current = res.result.current_page || pageIndex.value;
                pagination.pageSize = res.result.per_page || pageSize.value;
            } else {
                // 简单数组格式
                dataList.value = res.result;
                pagination.total = res.result.length || 0;
            }
        }

        dataLoading.value = false;
    }).catch(error => {
        console.error('获取数据失败:', error);
        dataLoading.value = false;
    })
}

function onAction(item, record) {
    emits('action', item, record)
}

function deleteConfirm(row) {
    props.deleteApi(row).then((res) => {
        if (res.code == 200) {
            message.success("删除成功");
            refreshData();
        }
    });
}
//重新加载数据
function refreshData() {
    pageIndex.value = 1;
    pageSize.value = 10;
    pagination.current = 1;
    getDataList()
}

// 搜索功能
function search(params) {
    searchParams.value = { ...params };
    pageIndex.value = 1;
    pagination.current = 1;
    getDataList();
}

// 重置搜索
function reset() {
    searchParams.value = {};
    pageIndex.value = 1;
    pagination.current = 1;
    getDataList();
}

defineExpose({
    refreshData,
    search,
    reset
})
</script>
<style lang="scss" scoped></style>